<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 分类管理 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="container">
            <template>
                <el-button style="float: right" type="primary" icon="el-icon-circle-plus" @click="handleAdd()">新增</el-button>
                <el-table
                    :data="
                        form.pageIndex * form.pageSize < tableData.length
                            ? tableData.slice((form.pageIndex - 1) * form.pageSize, form.pageIndex * form.pageSize)
                            : tableData.slice((form.pageIndex - 1) * form.pageSize, tableData.length)
                    "
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                    <el-table-column align="center" prop="cate_name" label="分类名称"> </el-table-column>
                    <el-table-column align="center" width="" label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">修改</el-button>
                            <el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页开始 -->
                <div class="pagination">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="form.pageIndex"
                        :page-size="form.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                    ></el-pagination>
                </div>
                <!-- 分页结束 -->
                <vue-element-loading :active="isActive" spinner="bar-fade-scale" color="#00D1B2" text="玩命加载中" />
            </template>
        </div>
        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" :close-on-click-modal="false" :visible.sync="editVisible" width="30%">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="分类名称：">
                    <el-input v-model="form.cate_name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveEdit()">确 定</el-button>
                <el-button @click="editVisible = false">取 消</el-button>
            </span>
        </el-dialog>
        <!-- 新增弹出框 -->
        <el-dialog title="新增" :close-on-click-modal="false" :visible.sync="addVisible" width="30%">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="分类名称：">
                    <el-input v-model="form.cate_name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveAdd()">确 定</el-button>
                <el-button @click="addVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import VueElementLoading from 'vue-element-loading';
import { allcate, updatecate, addcate, deletecate } from '../../api/cate';
export default {
    components: {
        VueElementLoading
    },
    // inject: ['reload'],
    data: function() {
        return {
            editVisible: false,
            addVisible: false,
            form: {
                cate_id: 0,
                cate_name: '',
                pageIndex: 1,
                pageSize: 6
            },
            tableData: [],
            formLabelWidth: '120px',
            isActive: false,
            pageTotal: 0
        };
    },
    created() {
        this.initComm();
    },
    methods: {
        // 分页导航
        handlePageChange(val) {
            this.$set(this.form, 'pageIndex', val);
        },
        //初始化显示
        initComm() {
            this.isActive = true;
            allcate()
                .then(res => {
                    // console.log(res.data.catelist);
                    this.tableData = res.data.catelist;
                    this.isActive = false;
                    this.pageTotal = res.data.catelist.length || 0;
                })
                .catch(err => {
                    console.log(err);
                });
        },
        saveEdit() {
            this.editVisible = false;
            var cate = JSON.stringify({
                // 参数
                cate_id: this.form.cate_id,
                cate_name: this.form.cate_name
            });
            updatecate(cate)
                .then(res => {
                    this.initComm();
                    this.$message.success('修改成功');
                })
                .catch(err => {
                    console.log(err);
                });
        },
        saveAdd() {
            this.addVisible = false;
            var cate = JSON.stringify({
                // 参数
                cate_id: 0,
                cate_name: this.form.cate_name
            });
            addcate(cate)
                .then(() => {
                    this.initComm();
                    this.$message.success('添加成功');
                })
                .catch(err => {
                    console.log(err);
                });
        },
        // 添加操作
        handleAdd() {
            this.form.cate_name = null;
            this.addVisible = true;
        },
        handleEdit(row) {
            this.form.cate_name = row.cate_name;
            this.form.cate_id = row.cate_id;
            this.editVisible = true;
        },
        handleDelete(row) {
            // console.log('row :>> ', row);
            this.$confirm('是否要进行删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    var cate = JSON.stringify({
                        // 参数
                        cate_id: row.cate_id,
                        cate_name: row.cate_name
                    });
                    // console.log('cate :>> ', cate);
                    deletecate(cate)
                        .then(res => {
                            this.initComm();
                            this.$message.success('删除成功');
                        })
                        .catch(err => {
                            console.log(err);
                        });
                })
                .catch(err => {
                    console.log(err);
                });
        },
        //分页
        handleSelectionChange() {}
    }
};
</script>

<style>
.user-avator {
    margin-left: 20px;
}
.user-avator img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.container {
    height: 100%;
}
</style>
